<style scoped lang="less">
.disabledBtn {
  pointer-events: none;
}
</style>
<template>
  <div
    :class="'unit-device-item ' + (type || stateObj[data.currentstate].type)"
  >
    <div class="hd flex">
      <h3 class="flex-1">{{ data.name }}</h3>
      {{ stateObj[data.currentstate].name }}
    </div>
    <div class="con">
      <p class="attr"><b>设备编号：</b>{{ data.number }}</p>
      <p class="attr"><b>设备类型：</b>{{ data.deviceTypeName }}</p>
      <p class="attr"><b>位 置：</b>{{ data.position }}</p>
      <el-row type="flex" class="mt-20" justify="space-between" :gutter="10">
        <el-col :span="6">
          <el-button type="default" class="full" @click="deviceDetails(data)"
            >详情</el-button
          >
        </el-col>
        <el-col :span="9">
          <el-button type="default" class="full" @click="logModalVisible = true"
            >报警记录</el-button
          >
        </el-col>
        <el-col :span="9">
          <el-button
            type="default"
            class="full"
            @click="showPlayback"
            v-if="
              data.productId == 6001 ||
              data.productId == 6002 ||
              data.productId == 6003 ||
              data.productId == 6011 ||
              data.productId == 6014
            "
            >鹰眼回放</el-button
          >
          <i
            :title="data.currentstate == 3 ? '设备已离线无法操作' : ''"
            style="cursor: not-allowed"
            v-else-if="data.deviceType == '30'"
          >
            <el-button
              type="default"
              :class="data.currentstate == 3 ? 'full disabledBtn' : 'full'"
              @click="ConfigurationEdit(data)"
              >组态应用
            </el-button>
          </i>

          <el-button type="default" class="full" @click="remoteControl" v-else
            >远程控制</el-button
          >
        </el-col>
      </el-row>
    </div>
    <!-- 报警记录 start -->
    <el-dialog
      v-if="logModalVisible"
      title="报警记录"
      :visible.sync="logModalVisible"
      :width="1000 * scale + 'px'"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      destroy-on-close
      append-to-body
    >
      <AlarmLog
        ref="log"
        :id="data.id"
        :classify="data.deviceClassify"
        :rfid="data.rfid"
        :number="data.number"
        @cancel="logModalVisible = false"
      >
      </AlarmLog>
    </el-dialog>
    <!-- 报警记录 end -->
    <!-- 设备详情 start -->
    <el-dialog
      v-if="detailModalVisible"
      title="设备详情"
      :visible.sync="detailModalVisible"
      :width="1000 * scale + 'px'"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      destroy-on-close
      append-to-body
    >
      <DeviceDetail
        ref="detail"
        :rfid="data.rfid"
        :id="data.id"
        :productId="data.productId"
        :classify="data.deviceClassify"
        :number="data.number"
        :scale="scale"
        @cancel="detailModalVisible = false"
      >
      </DeviceDetail>
    </el-dialog>
    <!-- 设备详情 end -->
    <!-- 远程控制 start -->
    <el-dialog
      class="remote-modal"
      v-if="remoteModalVisible"
      title="远程控制"
      :visible.sync="remoteModalVisible"
      :width="300 * scale + 'px'"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      destroy-on-close
      append-to-body
    >
      <el-button
        size="large"
        class="full"
        type="primary"
        @click="muteAction(data)"
        v-if="data.deviceClassify == 3"
      >
        消音
      </el-button>
      <template v-if="data.deviceClassify == 1">
        <p>当前状态：{{ data.openingState == 1 ? "开" : "关" }}</p>
        <div class="flex-1 mt-10" v-if="data.openingState == 1">
          <el-button class="full" type="red" @click="setRemoteControl"
            >关闭</el-button
          >
        </div>
        <div class="flex-1 mt-10" v-else>
          <el-button class="full" type="primary" @click="setRemoteControl"
            >打开</el-button
          >
        </div>
      </template>
    </el-dialog>
    <!-- 远程控制 end -->
    <!-- 鹰眼回放 start -->
    <el-dialog
      v-if="playbackModalVisible"
      title="鹰眼回放"
      :visible.sync="playbackModalVisible"
      :width="1600 * scale + 'px'"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      destroy-on-close
      append-to-body
    >
      <Playback
        ref="Playback"
        :startTime="startTime"
        :endTime="endTime"
        :number="data.number"
        :scale="scale"
        @cancel="playbackModalVisible = false"
        @chooseTime="chooseTimeAction"
      >
      </Playback>
    </el-dialog>
    <!-- 鹰眼回放 end -->
    <!-- 选择时间 start -->
    <el-dialog
      class="contact-dialog"
      v-if="playbackTimeModalVisible"
      title="选择回放时间段"
      :visible.sync="playbackTimeModalVisible"
      :width="550 * scale + 'px'"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      destroy-on-close
      append-to-body
    >
      <el-form :inline="true" class="filter-blk flex-1">
        <el-form-item>
          <el-date-picker
            v-model="timeRange"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            value-format="yyyy-MM-dd HH:mm:ss"
            format="yyyy-MM-dd HH:mm:ss"
            :clearable="false"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="confirmTime">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 选择时间 end -->
    <!-- 远程控制 分合闸 start -->
    <el-dialog
      class="remote-modal"
      v-if="issueModalVisible"
      title="远程控制 分合闸"
      :visible.sync="issueModalVisible"
      :width="300 * scale + 'px'"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      destroy-on-close
      append-to-body
    >
      <p>当前状态：{{ data.openingState == 1 ? "开" : "关" }}</p>
      <div class="flex-1 mt-10" v-if="data.openingState == 1">
        <el-button size="large" class="full" type="red" @click="openIssue(data)"
          >关闭</el-button
        >
      </div>
      <div class="flex-1 mt-10" v-else>
        <el-button
          size="large"
          class="full"
          type="primary"
          @click="openIssue(data)"
          >打开</el-button
        >
      </div>
    </el-dialog>
    <!-- 远程控制 分合闸 end -->
    <!-- 组态编辑  start -->
    <el-dialog
      class="remote-modal"
      v-if="ConfigurationVisible"
      title="水位状态"
      :visible.sync="ConfigurationVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      destroy-on-close
      append-to-body
    >
      <Configuration
        :number="data.number"
        :svgdeviceClassify="svgdeviceClassify"
        :svgdeviceId="svgdeviceId"
      ></Configuration>
    </el-dialog>
    <!-- 组态编辑 end -->
    <!-- 远程控制  start -->
    <el-dialog
      class="remote-modal"
      v-if="isOutfireVisible"
      title="远程控制 自动灭火"
      :visible.sync="isOutfireVisible"
      :width="300 * scale + 'px'"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      destroy-on-close
      append-to-body
    >
      <el-button size="large" class="full mb-10" @click="openOutfire(1)"
        >复位</el-button
      >
      <el-button
        style="margin: 0 !important"
        size="large"
        class="full"
        type="primary"
        @click="openOutfire(2)"
        >启动</el-button
      >
    </el-dialog>
    <!-- 远程控制  end -->
    <!-- 密码验证  start -->
    <el-dialog
      class="remote-modal"
      v-if="isPassword"
      title="密码验证"
      :visible.sync="isPassword"
      :width="500 * scale + 'px'"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      destroy-on-close
      append-to-body
    >
      <el-form :model="accountForm" label-width="100px">
        <el-form-item label="用户名"
          >{{ accountForm.accountname }}
        </el-form-item>
        <el-form-item label="密码">
          <el-input
            v-model="accountForm.accountpassword"
            placeholder="请输入密码"
            type="passWord"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="verifylogin">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 密码验证  end -->
  </div>
</template>
<script>
import AlarmLog from "@/components/AlarmLog.vue";
import DeviceDetail from "@/components/device/DeviceDetail.vue";
import Playback from "@/components/device/Playback.vue";
import Configuration from "@/components/device/Configuration.vue";
import { mapState } from "vuex";
export default {
  name: "unitDeviceItem",
  props: {
    data: {
      type: Object,
      default() {
        return {};
      },
    },
    type: {
      type: String,
      default: "",
    },
    scale: {
      type: Number,
      default: 1,
    },
  },
  components: {
    AlarmLog,
    DeviceDetail,
    Playback,
    Configuration,
  },
  watch: {},
  computed: {
    ...mapState(["siteInfos"]),
  },
  data() {
    return {
      issueModalVisible: false,
      stateObj: {
        1: {
          name: "正常",
          type: "normal",
        },
        2: {
          name: "报警",
          type: "alarm",
        },
        3: {
          name: "离线",
          type: "offline",
        },
        4: {
          name: "故障",
          type: "breakdown",
        },
      },
      logModalVisible: false,
      detailModalVisible: false,
      remoteModalVisible: false,
      playbackModalVisible: false,
      endTime: "",
      startTime: "",
      timeRange: [],
      playbackTimeModalVisible: false,
      ConfigurationVisible: false,
      svgdeviceClassify: "",
      svgdeviceId: "",
      isOutfireVisible: false,
      isPassword: false,
      accountForm: {},
      outfireState: 1, //灭火状态
    };
  },

  methods: {
    // 电气火灾远程控制
    setRemoteControl() {
      let state = this.data.openingState == 1 ? 2 : 1;
      this.$post("/fireFightingIOT/device/createCommand", {
        number: this.data.number,
        state,
      }).then(
        (res) => {
          this.remoteModalVisible = false;
          this.$message.success("操作成功");
          this.$emit("update");
        },
        (err) => {
          if (err.msg) {
            this.$message.error(err.msg);
          }
        }
      );
    },
    remoteControl() {
      if (this.data.deviceClassify == 3 || this.data.deviceClassify == 1) {
        this.remoteModalVisible = true;
      }
      if (this.data.deviceType == 22) {
        this.issueModalVisible = true;
      }
      if (
        this.data.deviceType == "35" ||
        (this.data.deviceType == "1001" && this.data.productId == "2011")
      ) {
        this.isOutfireVisible = true;
      }
      console.log(this.data);
    },
    verifylogin() {
      this.$post("/systemsetup/systemsetup/login", this.accountForm).then(
        (res) => {
          this.$post("/fireFightingIOT/device/iotPost", {
            id: this.data.id,
            state: this.outfireState,
          }).then(
            (res) => {
              this.isOutfireVisible = false;
              this.isPassword = false;
              this.$message.success("操作成功");
              this.$emit("update");
            },
            (err) => {
              if (err.msg) {
                this.$message.error(err.msg);
              }
            }
          );
        },
        (err) => {
          this.$message.error(err.msg);
        }
      );
    },
    // 灭火
    openOutfire(state) {
      this.accountForm = {
        accountname: this.siteInfos.accountname,
        accountpassword: "",
      };
      this.isPassword = true;
      this.outfireState = state;
    },

    openIssue() {
      let type = this.data.openingState == 1 ? 2 : 1;
      this.$post("/fireFightingIOT/device/openIssued", {
        number: this.data.number,
        type: type,
      }).then(
        (res) => {
          this.issueModalVisible = false;
          this.$message.success("操作成功");
          this.$emit("update");
        },
        (err) => {
          if (err.msg) {
            this.$message.error(err.msg);
          }
        }
      );
    },
    showPlayback() {
      this.playbackTimeModalVisible = true;
      let today = new Date().Format("yyyy-MM-dd");
      this.timeRange = [today + " 00:00:00", today + " 23:59:59"];
    },
    confirmTime() {
      if (this.timeRange.length == 0) {
        this.$message.error("请选择起始时间");
        return;
      }
      this.startTime = this.timeRange[0];
      this.endTime = this.timeRange[1];
      this.playbackModalVisible = true;
    },
    chooseTimeAction() {
      this.playbackModalVisible = false;
      this.showPlayback();
    },
    deviceDetails(val) {
      if (val.deviceType == "1001") {
        this.$emit("update", { isChildren: 1, transDeviceCode: val.number });
      } else {
        this.detailModalVisible = true;
      }
    },

    ConfigurationEdit(item) {
      this.svgdeviceId = item.id;
      this.svgdeviceClassify = item.deviceClassify;
      this.ConfigurationVisible = true;
    },
  },
  created() {
    // console.log(this.data)
  },
};
</script>
